<template>
  <div class="flip-number">
    <transition name="flip" mode="out-in">
      <div :key="value" class="number">
        {{ value }}
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

// 定义 props
defineProps({
  value: {
    type: String,
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.flip-number {
  display: inline-block;
  perspective: 1000px; // 添加透视效果
}

.number {
  display: inline-block;
  padding: 10px;
  background-color: var(--background-hover-color);
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d; // 保持3D变换
  transform-origin: center; // 设置旋转中心为中间
}

.flip-enter-active,
.flip-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-enter-from,
.flip-leave-to {
  transform: rotateX(90deg);
  opacity: 0;
}

.flip-enter-to,
.flip-leave-from {
  transform: rotateX(0deg);
  opacity: 1;
}
</style>
